<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../d3-tip.css">
    <style>
      circle{
        cursor: pointer;
      }
    </style>
  </head>
  <body>

    <script src="../d3.js"></script>
    <script src="../d3-v6-tip.js"></script>
    <script>
      const svg = d3.select('body').append('svg')
        .attr('width',800)
        .attr('height',600)
        .style('border','1px solid #ccc')

      const g = svg.append('g').attr('transform','translate(400,300)')

      const arc = d3.arc() 
          .innerRadius(100)
          .outerRadius(200)
          .padAngle(0.1)
          .cornerRadius(10)

      let d = arc({
          startAngle:0,
          endAngle:Math.PI/2,
          //outerRadius:200,
          //innerRadius:100
      })

      g.append('path')
        .attr('d',d)
        .attr('stroke','#666')
        .attr('fill','#fac')
   
      d = arc({
          startAngle:Math.PI/2,
          endAngle:Math.PI,
          //outerRadius:200,
          //innerRadius:100
      })

      g.append('path')
        .attr('d',d)
        .attr('stroke','#666')
        .attr('fill','#acf')



      const point = arc.centroid({
          startAngle:0,
          endAngle:Math.PI/2,
          outerRadius:200,
          innerRadius:100
        })  


      g.append('circle')
        .attr('cx',point[0])
        .attr('cy',point[1])
        .attr('r',4)  
    </script>
  </body>
</html>
